<template>
  <div class="mainbg fontDa">
    <div class="header">
      <span v-if="!keyCollapse" key="1" class="avue-logo_title">
        <el-image style="width: 170px; height: 60px" :src="website.logo" fit="contain" class="menulogo"></el-image>
<!--        <div class="avue-logo_title_text">{{ website.title }}</div>-->
      </span>
      <el-link type="danger" icon="el-icon-switch-button" @click="logout" :underline="false">退出系统</el-link>
    </div>
    <div class="userBox boxsty">
      <el-avatar class="avatar" shape="square" :size="68" fit="cover" :src="userInfo.avatar"></el-avatar>
      <div>
        <div class="userName">欢迎您，{{ userInfo.ryName }}</div>
        <div class="userDepart">{{ userInfo.ryZw ? userInfo.ryZw : "" }}</div>
      </div>
    </div>
    <div class="userBtn">
      <el-badge :value="cpszNum" :hidden="cpszNum==0" class="userBtnBadge" style="flex-shrink: 0; margin-right:20px">
        <div class="userBtnItem userBtnItem1" @click="openSz()">
          <i class="iconfont icon-baogao iconbg"></i>
          <i class="iconfont icon-baogao"></i>
          <div>述职报告</div>
        </div>
      </el-badge>
      <!-- <el-badge :value="cphdNum" :hidden="cphdNum==0" class="userBtnBadge" style="flex-shrink: 0; margin-right:20px">
        <div class="userBtnItem userBtnItem1" @click="openHd(0)">
          <i class="iconfont icon-toupiao iconbg"></i>
          <i class="iconfont icon-toupiao"></i>
          <div>测评</div>
        </div>
      </el-badge> -->

      <div class="boxsty" style="width:100%;">
        <div class="tabletext titbottom">待办事项</div>
        <cepingDcp ref="cepingDcp" :tableHeaderYC="true"></cepingDcp>
      </div>
      <!-- <el-badge :value="12" class="userBtnBadge"> -->
      <!-- <div class="userBtnBadge">
        <div class="userBtnItem userBtnItem2">
          <i class="iconfont icon-qiandai iconbg"></i>
          <i class="iconfont icon-qiandai"></i>
          <div>奖金分配</div>
          <div style="font-size:18px;opacity:0.8;position: absolute; bottom:15px">暂未开通</div>
        </div>
      </div> -->
      <!-- </el-badge> -->
      <!-- <el-badge :value="200" :max="99" class="userBtnBadge"> -->
      <!-- <div class="userBtnBadge">
        <div class="userBtnItem userBtnItem3">
          <i class="iconfont icon-kaohemoban iconbg"></i>
          <i class="iconfont icon-kaohemoban"></i>
          <div>日常考核</div>
          <div style="font-size:18px;opacity:0.8;position: absolute; bottom:15px">暂未开通</div>

        </div>
      </div> -->
      <!-- </el-badge> -->
    </div>
    <cePing ref="cePing" @next="reloadHd"/>
    
    <el-dialog title="我的述职报告" top="3vh" :visible.sync="dialogVisible" width="90%" destroy-on-close append-to-body class="fontDa">
       <div class="fontDa"><cepingSzbg ref="cepingSzbg" @reload="reloadSz" tableHeight="calc((100vh - 100px - 200px)"/></div>
    </el-dialog>
    
  </div>
</template>

<script>
import {wdHuoDong} from "@/api/ceping/cepinghdglb";
import {getSzbgCount} from "@/api/ceping/cepingszbgb";

import cepingDcp from "@/page/welcomeComponents/cepingDcp"; //带测评
import cepingSzbg from "@/page/welcomeComponents/cepingSzbg"; //带测评
import {mapGetters} from 'vuex'
import cePing from './cpIndex';

export default {
  name: "index",
  data() {
    return {
      dialogVisible: false,
      cphd: [],
      cphdNum: 0,
      cpszNum: 0
    }
  },
  components: {
    cePing,
    cepingDcp,
    cepingSzbg
  },
  mounted() {
    this.init();
    this.reloadSz();
  },
  computed: {
    ...mapGetters(['userInfo', 'website', 'keyCollapse'])
  },
  methods: {
    init() {
      // wdHuoDong().then(res => {
      //   this.cphd = res.data.data;
      //   this.cphdNum = res.data.data.length;
      // })

    },
    reloadHd() {
      // wdHuoDong().then(res => {
      //   this.cphd = res.data.data;
      //   this.cphdNum = res.data.data.length;
      //   if (this.cphdNum > 0) {
      //     this.openHd();
      //   }
      // })
    },
    //打开会议
    openHd() {
      if (this.cphdNum > 0) {
        this.$refs.cePing.initHd(this.cphd[0].id)
      } else {
        this.$notify.closeAll();
        this.$notify.error('现在还没有您可以参加测评的会议');
      }
    },
    reloadSz() {
      getSzbgCount().then(res=>{
        this.cpszNum = res.data.data*1;
      })
    },
    openSz() {
      this.dialogVisible = true;
    },
    // 退出系统
    logout() {
      this.$confirm('是否退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({path: '/login'})
        })
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@import "./src/styles/variables.scss";

.mainbg {
  background: #f4f4fc;
  height: 100vh;
}

.header {
  background: #fff;
  height: 60px;
  @include boxShadowGray(5px, 0px, 10px);
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}

.userBox,
.userBtn {
  width: 72vw;
  margin: 6vh auto;
}

.userBox {
  display: flex;
  padding: 40px;

  .avatar {
    border: 4px solid #fff;
    @include boxShadowGray(5px, 0px, 10px);
    margin-right: 25px;
  }

  .userName {
    font-size: 32px;
    font-weight: bold;
    padding-bottom: 10px;
    line-height: 1;
  }

  .userDepart {
    color: $infoColor;
    font-size: 18px;
  }
}

.userBtn {
  display: flex;
  justify-content: space-between;

  .userBtnBadge {
    /deep/ .el-badge__content {
      font-size: 18px;
      border: 0;
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 50%;

      &.is-fixed {
        right: 20px;
      }
    }

    .userBtnItem {
      width: calc(72vw / 3 - 20px);
      text-align: center;
      border-radius: 16px;
      background: linear-gradient(100deg, #67cac5, #50c9c3, #14bd96);
      box-shadow: 5px 0px 10px rgba(59, 199, 211, 0.5);
      color: #fff;
      // height: calc(72vw / 3 - 20px);
      height: calc((100vh - 80px - 26px) / 2);
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      .iconfont {
        font-size: 9vw;
        text-shadow: rgba(0, 0, 0, 0.2) 0px 16px 25px;
        position: relative;
        z-index: 2;
      }

      .iconfont.iconbg {
        font-size: 18vw;
        opacity: 0.15;
        position: absolute;
        right: -2vw;
        bottom: -2vw;
        transform: rotate(-22.5deg);
        z-index: 1;
      }

      div {
        font-size: 3vw;
        width: 80%;
        margin: 10px auto 0;
      }

      &.userBtnItem2 {
        background: linear-gradient(100deg, #f7ce68, #ff933b, #ee6c02);
        box-shadow: 5px 0px 10px rgba(207, 154, 85, 0.5);
      }

      &.userBtnItem3 {
        background: linear-gradient(100deg, #52dcd5, #2cacd1, #2b76b9);
        box-shadow: 5px 0px 10px rgba(44, 172, 209, 0.5);
      }
    }
  }
}
</style>
